<template>
  <view>
    <view class="box"></view>

    <uni-card>{{ msg }}</uni-card>
    <uni-card>{{ $t('i18n.language') }}</uni-card>
    <uni-card>{{ $t('i18n.title') }}</uni-card>

    <button @click="handleChangeLanguage(item)" v-for="item in languageList" :key="item.text">{{ item.text }}</button>
  </view>
</template>

<script>
/**
 * 国际化：
 * 1. 引入插件
 * 2. 配置插件
 * 3. 准备语言
 * 4. 渲染
 * 5. 切换
 * 6. 注意如果需要定义初始化数据切换，需要放置在计算属性中，
 *
 * 不能直接修改data中的数据
 *
 * 放在data中的数据，不能直接改变，如果要改变，可以通过
 * ：计算属性，让他根据this改变之后的结果，具备自己改变的能力。
 *
 * 计算属性：计算属性是基于它们的响应式依赖进行缓存的
 */
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  // 会根据this的改变而改变
  computed: {
    ...mapState(['msg']),
    languageList() {
      return [
        {
          // js中的汉语
          text: this.$t('locale.en'), //'英语', // this.$t('locale.auto')
          code: 'en'
        },
        {
          text: this.$t('locale.zh-hans'), // '汉语',
          code: 'zh-Hans'
        }
      ]
    }
  },
  methods: {
    ...mapMutations(['change_lang']),
    handleChangeLanguage(item) {
      console.log('item:', item)
      this.change_lang(item.code)
      // 更改组件中的内容
      uni.setLocale(item.code)
      // 更改js中的内容
      this.$i18n.locale = item.code
    }
  }
}
</script>

<style lang="scss">
.box {
  // 750设计图上，100px = 1rem
  width: 1rem;
  height: 1rem;
  background: red;
}
</style>
